<template>
  <div>
    <el-tag type="success">当前的设备编号是{{equId}}</el-tag>
        <el-divider></el-divider>
     <!-- <equ-attr-form-vue></equ-attr-form-vue> -->
     <el-row  :gutter="20">
        <el-col :span="10">
        <div id="container"></div>
        </el-col>
     </el-row>
     <el-row>
        <el-button type="primary" @click="retuEquList">返回设备列表</el-button>
     </el-row>
  </div>
</template>

<script> 
import equAttrFormVue from "../form/equAttrForm.vue";  
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '683b4d8f04c4254dd4ab4bc1aaa0d039'
}; 
export default {
    data() {
        return {
           equId:'',
           map:null,
        }
    },
    components:{
        equAttrFormVue
    },
    mounted(){
      this.initEquId();
      this.initMap();
    },
    beforeRouteEnter (to, from, next) {
        console.log(from)
        console.log(to.path)
        console.log(to.path.split('/')[2])
        window.localStorage.setItem('equId',to.path.split('/')[2])
        next()
    },
    methods:{
    retuEquList(){
        this.$router.push('/demo')
    },
    standPath(path){
        return path.split('/')[2]
    },
      initEquId(){
        this.equId = window.localStorage.getItem('equId')
      } ,
    initMap() {
      AMapLoader.load({
        key: '3f8a09fca06a15423c4d18fc3f47dfee', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 
        'AMap.Scale', 'AMap.HawkEye', 
        'AMap.MapType', 'AMap.Geolocation', 
        'AMap.AutoComplete', 
        'AMap.PlaceSearch',
        'AMap.DistrictSearch'
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
          this.map = new AMap.Map('container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [113.357224,34.977186] //初始化地图中心点位置
          })
           let positionArr = [
                    [113.357224,34.977186],
                    [114.555528,37.727903],
                    [112.106257,36.962733],
                    [109.830097,31.859027],
                    [116.449181,39.98614],
                ];
                // 创建 AMap.Icon 实例：
            var icon = new AMap.Icon({
                size: new AMap.Size(40, 50),    // 图标尺寸
                image: 'https://files.catbox.moe/llpdno.png',  // Icon的图像
                imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
            });
                for(let item of positionArr){
                    let marker = new AMap.Marker({
                        position:[item[0],item[1]],
                        icon:icon
                    });
                    this.map.add(marker);
                }
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.HawkEye())
          this.map.addControl(new AMap.MapType())
          this.map.addControl(new AMap.Geolocation())
          this.auto = new AMap.AutoComplete(this.autoOptions)
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map
          }) //构造地点查询类
          this.auto.on('select', this.select)
        })
        .catch(e => {
          console.log(e)
        })
    }
    },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    console.log(to)
    console.log(to.path.split('/')[2])
    window.localStorage.setItem('equId',to.path.split('/')[2])
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    this.initEquId()
     this.initMap()
    // 可以访问组件实例 `this`
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    window.localStorage.removeItem('equId')
    this.initEquId()
    this.initMap()
    next()
  },
}
</script>

<style>
#container {
  padding: 0px;
  margin: 0px;
  width: 1000px;
  height: 400px;
}
</style>